<template>
  <div ref="parentDiv" :draggable="allowDragging" @dragstart="drag" class="layout-item">
    <div class="layout-item-header">
      <span>{{ title }}</span>
      <div class="spacer"></div>
      <button @click="onClose">x</button>
      <button @click="onDetach">det</button>
      <button @click="onAttach">att</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, defineEmits, PropType, computed } from "vue";
import { store } from "./store";
const allowDragging = computed(() => store.state.allowDragging);

const props = defineProps({
  itemUuid: { type: String, required: true },
  name: { type: String, required: true },
  status: {
    type: String as PropType<"window" | "layout">,
    required: false,
    default: "layout",
  },
  title: { type: String, required: true },
});
const emits = defineEmits(["close", "detach", "attach"]);
const parentDiv = ref<HTMLDivElement | null>(null);
const drag = (evt: DragEvent) => {
  evt.dataTransfer?.setData("layout-item-name", props.name);
  evt.dataTransfer?.setData("layout-item-uuid", props.itemUuid);
};

const onClose = () => {
  store.commit('hideTarget', props.name);
  emits("close", props.name);
};

const onDetach = () => {
  emits("detach", props.name);
};
const onAttach = () => {
  emits("attach", props.name);
};
</script>

<style scoped>
.layout-item {
  background-color: var(--pwm-background-color);
}

.layout-item .layout-item-header {
  display: flex;
  flex-direction: row;
  height: var(--pwm-title-height);
  background-color: var(--pwm-title-background-color);
}

.layout-item-header .spacer {
  flex-grow: 1;
}

.layout-item-header button {
  border: 0px;
  border-radius: 0px;
}
</style>
